import Vue from 'vue'

new Vue({
    el: '#root',
    template: `
        <div>
            <span>Name: {{fullName}}</span>
            <p>{{number}}</p>
            <input type="text" v-model="number">
            <br/>
            <p></p>
            <input type="text" v-model="obj.a">
        </div>
    `,
    data: {
        text: 'text2',
        firstName: 'Jokcy',
        lastName: 'Lou',
        number: 0,
        obj: {
            a: 123
        }
    },
    // 使用缓存，每次调用render不用重新计算
    computed:{
        fullName(){
            console.log('render')
            return this.firstName + " " + this.lastName
        }
    },
    watch: {
        firstName (newName, oldName) {
            this.fullName = newName + ' ' + this.lastName
        },
        "obj.a": {
            handler(){
                console.log('obj.a changed')
            },
            immediate: true,
            // deep: true
        }
    }
})